<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <cart :count="count" :isshow="true" msg="糖" message="aa" :price="100"></cart>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                count: 100
            }
        },
    })

    app.component('cart', {
        template: `<div> cart {{price}}</div>`,
        props: {
            // 属性验证，要求属性的类型一定要和指定的类型相同，否则会有警告信息
            count: Number,
            isshow: Boolean,
            // 设置可以接收数字和字符串类型，其他类型不可以接收
            msg: [Number, String],
            message: {
                type: [Number, String, Object],
                // 设置该属性为必填项
                required: true
            },
            price: {
                // 配置默认值，当父组件不给传值的时候就使用默认值，传了就用父组件传递的值
                default: 10,
                type: Number
            },
            obj: Object,
            arr: Array,
            fn: Function
        }
    })

    app.mount('#app')
</script>

</html>